<template>
  <div class="container">
    <div class="air_form_title">
      <div
        v-for="(item ,index ) in titles"
        :key="index"
        :class="['air_form_title_item',index===titlesIndex?'active':'']"
        @click="titlesIndex=index"
      >
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </div>
    </div>
    <div class="air_form_content">
      <span class="huan"
        @click="changeCity"      
      >换</span>
      <div class="air_form_inp_item">
        <label for="">出发城市</label>
        <el-autocomplete
          class="air_form_input"
          placeholder="请搜索出发城市"
          v-model="form.departCity"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          @select="handleSelect1"
        ></el-autocomplete>
      </div>

      <div class="air_form_inp_item">
        <label for="">到达城市</label>
        <el-autocomplete
          class="air_form_input"
          placeholder="请搜索到达城市"
        v-model="form.destCity"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          @select="handleSelect2"
        ></el-autocomplete>
      </div>
      <div class="air_form_inp_item">
        <label for="">出发时间</label>
        <el-date-picker
          type="date"
          class="air_form_input"
          placeholder="选择日期"
           v-model="form.departDate"
           value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="air_form_inp_item air_form_inp_item_btn  ">
        <el-button
          class="air_form_input"
          icon="el-icon-search"
          type="primary"
          @click="submitSearch"
        >搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: [
        {
          name: "单程",
          icon: "iconfont icondancheng"
        },
        {
          name: "往返",
          icon: "iconfont iconshuangxiang"
        }
      ],
      titlesIndex: 0,
      form: {
        // 出发城市
        departCity: "",
         // 出发城市的代码
        departCode: "",
        // 目的城市
        destCity:"",
        // 目的城市的代码
        destCode: "",
           // 出发日期
        departDate:""
      },
      // 日期选择框的配置对象
      pickerOptions:{
        disabledDate(date){
          // date 参数 是日历上的日期 2020/8/27 2020/8/28 2020/8/29  
          // 如何判断 摸索   
          // return false;

            // date 参数 是日历上的日期 2020/8/26 2020/8/27 2020/8/28
          // 如何判断 摸索

          // 两个日期之间的比较  处理  可大可小
          // 2020/8/27 -  2020/8/26
          // 返回 1970年 到现在的 毫秒数 时间戳

          // 获取 日历上的 每一个日期的 时间戳
          const caTime = date.getTime();
          // 获取 当下的时间戳
          const currentTime = Date.now();

          // 返回了 true 表示 禁用
          //  日历上的日期 比 现在的日期 要小 少   返回true

          // 需要手动的将 日历上的日期 减少一天 效果可以了
          // return caTime  < currentTime;
          return caTime + 24 * 60 * 60 * 1000 < currentTime;

        }
      }
    };
  },
  methods: {
    // 出发城市 输入城市名称后会触发的事件
    querySearchAsync(queryString, cb) {
      /* 
      1 获取出发城市的值
      2 发送请求获取 城市数组
      3 构造满足 组件要求的格式的数组
      4 传递给cb 
       */
      const { departCity } = this.form;
      // this.$axios.get("/airs/city?name="+departCity)

      // this.$axios.post("/airs/city", {name:departCity},{headers:{}})
      this.$axios
        .get("/airs/city", {
          params: {
             name: queryString
          }
        })
        .then(res => {
          // console.log(res);
          // code: "440100000000" created_at: "2019-04-02 08:18:16" id: 197 level: "2" name: "广州市" parentCode: "440000000000" sort: "CAN" updated_at: 1558617184703

          // 要求的格式  {value:"广州市"}

          // 保留数据全部属性之外 还需要添加多一个属性 value
          // const obj={ name:"悟空" }
          // const newObj={...obj,value:"sun"};
          // newObj={name:"悟空",value:"sun"}
          // const list = res.data.data.map(v => ({ ...v, value: v.name }));
          const list = res.data.data.map(v => ({ ...v, value: v.name.replace("市","") }));
          cb(list);
        });
    },
    // 点击推荐城市中的选项后
       // 点击 出发城市中的选项后
    handleSelect1(item) {
      // console.log(item);
      this.form.departCode = item.sort;
    },
    // 点击到达城市 选项
    handleSelect2(item) {
      this.form.destCode = item.sort;
  },

   // 点击换 事件
    changeCity() {
      // 交换城市 有城市名称和城市代码

      // low B 写法
      // const { departCity, departCode, destCity, destCode } = this.form;
      // this.form.departCity=destCity;
      // this.form.departCode=destCode;
      // this.form.destCity=departCity;
      // this.form.destCode=departCode;

      [ this.form.departCity, this.form.departCode, this.form.destCity, this.form.destCode ] = [ this.form.destCity, this.form.destCode, this.form.departCity, this.form.departCode ];
  },
   // 点击搜索按钮
    submitSearch() {
      /* 
      1 获取表单的值
      2 按个校验合法性
      3 不通过 就弹窗提示用户
      4 通过 再跳转页面到机票列表
       */

      //  departCity: "",
      //         // 出发城市的代码
      //         departCode: "",
      //         // 目的城市
      //         destCity: "",
      //         // 目的城市的代码
      //         destCode: "",
      //         // 出发日期
      //         departDate: ""
      const data = {
        departCity: {
          value: this.form.departCity,
          msg: "请输入出发城市"
        },
        departCode: {
          value: this.form.departCode,
          msg: "请输入出发城市"
        },
        destCity: {
          value: this.form.destCity,
          msg: "请输入到达城市"
        },
        destCode: {
          value: this.form.destCity,
          msg: "请输入到达城市"
        },
        departDate: {
          value: this.form.departDate,
          msg: "请选择日期"
        }
      };

      // 遍历这个对象data  某个字段不合法就弹出提示
      // 对象 forin  low
      const isOk = Object.values(data).every(v => {
        if (v.value) {
          return true;
        } else {
          this.$message.error(v.msg);
          return false;
        }
      });  


      if(isOk){
        // console.log("通过校验");
        
        this.$router.push({
          path: "/air/flights",
          query: this.form
        });
      }else{
        console.log("没有通过");
      }

  }
  }
};
</script>

<style lang="less" scoped >
.container {
  width: 100%;
  border: 1px solid #ccc;
  height: 350px;
}
.air_form_title {
  height: 50px;
  display: flex;
  .air_form_title_item {
    // 子项 高度 默认等于父项的高度
    background-color: #eeeeee;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      background-color: #fff;
      position: relative;
      // border-top: 5px solid #ffa500;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #ffa500;
        top: 0;
        left: 0;
      }
    }
    span {
      margin-left: 5px;
    }
  }
}

.air_form_content {
  padding: 12px 50px 0 30px;
  position: relative;
  .huan {
    background-color: #999999;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 14px;
    top: 50px;
    font-size: 12px;
    &::before {
      width: 26px;
      height: 60px;
      content: "";
      border: 1px solid #ccc;
      border-left: none;
      position: absolute;
      left: -16px;
      top: -20px;
      z-index: -1;
    }
  }
  .air_form_inp_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    label {
      color: #666;
      font-size: 12px;
    }
    .air_form_input {
      width: 210px;
    }
  }
  .air_form_inp_item_btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>